@charset 'utf-8';
@media screen and (max-width: 767px) {
    .mv-controls {
        display: none;
    }
    .main-pg3-container{
        height: 900px;
    }
    .main-pg1-bg {
        display: none;
    }
    .main-pg1-con {
        width: 100%; 
    }
    .main-pg1-bg {
        display: none;
    }
    .main-pg1-img1, .main-pg1-img2, .main-pg1-img3 {
        padding-top: 58%;
        background-size: 73%;
    }
    .main-pg3-bg {
        height: 550px;
    }
    .main-pg3-bgbox {
        height: 490px;
    }
    #fp-nav {
        display: none;
    }
    .color-nav {
        display: none;
    }
}
@media screen and (min-width: 560px) and (max-width: 767px) {
    .main-tiltle {
        font-size: 2em;
    }
    .main-desc {
        font-size: 1.3em;
        margin-bottom: 50%;
    }
    .main-span-bg {
        background-size: 40%;
        background-image: url('../images/main_e1.png');
    }
    .main-span-bg > li {
        margin-top: 6%;
        font-size: 95%;
    }
    .pg2-txt {
        padding: 100px 7%;
        font-size: 1.25em;
    }
    .main-pg3-bg {
        height: 700px;
    }
    .main-pg3-elipbox{ 
        position: relative;
        height: 180px;
    }
    .main-pg3-boxtxt h2 {
        margin-bottom: 40px;
    }
    .main-pg3-boxtxt {
        padding-top: 60px;
    }
    .main-pg3-boxelip {
        position: absolute;
        float: left;
    }
    .box1{
        margin-left: -170px;
    }
    .box2 {
        margin-left: 30px;
    }
}
@media screen and (min-width: 768px) {
    .mv-controls {
        display: inline-block;
        position: absolute;
        width: 149px;
        bottom: 55px;
        padding: 0;
        margin: 0 39%;
    }
    .mv-controls label {/*이전, 다음 버튼*/
        position: absolute;
        display: none;
        width: 14px;
        height: 14px;
        top: 10px;
        border: 1.5px solid #eee;
        border-width: 3px 0 0 3px;
        text-indent: -9999em;
        overflow: hidden;
        margin-left: -5px;
    }
    .mv-controls label:hover {
        border-color: #1e4eff;
    }
    .main-pg2-container {
        padding: 0;
    }
    .main-pg2-list {
        float: left;
        max-width: 1960px;
        margin: auto;
    }
    .main-pg2-box {
        float: left;
        width: 32%;
        height: 650px;
        margin-left: 10px;
        margin-top: 50px;
        margin-bottom: 50px;
    }
    
    .main-pg2-img1, .main-pg2-img2, .main-pg2-img3 {
        height: 480px;
    }
    .pg2-txt {
        padding: 180px 5%;
        font-size: 1.3em;
    }
    
    .main-pg2-container.active .main-pg2-box.active {width: 50%;}
    .main-pg2-container.active .main-pg2-box {width: 23%;}
    .main-pg2-container.active .main-pg2-inner img {width: 25%;}
    /*메인페이지4*/
    .main-pg4-inner h2 {
        font-size: 2.5em;
    }
    button {
        width: 40px;
        height: 40px;
    }
    .main-pg4-list {
        height: 260px;
        margin-top: 40px;
    }
    .main-pg4-news-txt > span {
        float: left;
        padding-right: 15px;
    }
    .main-pg4-nt-top {
        font-size: 1em;
    }
    .main-pg4-day {
        padding-top: 3px;
        font-size: 0.8em;
    }
    .main-pg4-news h3 {
        padding-top: 50px;
        padding-bottom: 20px;
    }
    .main-pg4-news h3 {
        font-size: 1.2em;
    }
    .main-pg4-news p {
        font-size: 0.9em;
    }
    .main-pg3-inner {
        position: absolute;
        top: 0;
        left: 0;
        padding-top: 25px;
        height: 200px;
        z-index: 10;
    }
    .main-pg3-bg {
        height: 90%;
        bottom: 0;
        background-position: bottom;
    }
    .main-pg3-bgbox {
        width: 55%;
        min-width: 650px;
        max-width: 800px;
        right: 10%;
        padding: 0 2%;
        margin-top: 200px;
        border: 1px solid rgba(255, 255, 255, 0.3);
    }
    .main-pg3-boxa {
        max-width: 550px;
        margin-top: 30px;
    }
    .main-pg3-elipbox{ 
        position: relative;
        height: 180px;
    }
    .main-pg3-boxtxt h2 {
        margin-bottom: 40px;
    }
    .main-pg3-elipbox::before {
        display: block;
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -70px;
        width: 1px;
        height: 100px;
        background-color: rgba(255, 255, 255, 0.4);
    }
    .main-pg3-boxelip:hover {
        left: 47%;
        width: 180px;
        height: 180px;
        font-size: 1.3em;
        transition: ease 0.5s;
    }
    .main-pg3-boxtxt {
        padding-top: 60px;
    }
    .main-pg3-boxelip {
        position: absolute;
        float: left;
    }
    .box1{
        margin-left: -170px;
    }
    .box2 {
        margin-left: 30px;
    }
    .main-pg4-list {
        animation: moveL 1s 0.5s both;
    }
    
}
@media screen and (min-width: 768px) and (max-width: 1279px) {
    .main-tiltle {
        font-size: 2.8em;
        margin-bottom: 10px;
        padding: 0 5%;
    }
    .main-desc {
        font-size: 1.5em;
        margin-bottom: 30%;
    }
    .main-span-bg {
        background-size: 35%;
    }
    .main-span-bg > li {
        font-size: 95%;
        margin-top: 5%;
    }
    .mv-pagination {
        margin: 0 40.6%;
    }
    .mv-controls {
        margin: 0 37%;
    }
    .mp-pagination {
        padding: 2% 7%;
    }
    .main-pg1-bg {
        display: none;
    }
    .main-pg1-con {
        width: 100%; 
    }
    .pg2-txt-inner {
        width: 300px;
        margin: auto;
    }

    
}
@media screen and (min-width: 1280px) {
    .main-tiltle {
        font-size: 3.75em;
        margin-bottom: 0.2em;
    }
    .main-desc {
        font-size: 1.8em;
        margin-bottom: 18%;
    }
    .mv-pagination {
        margin: 0 41.6%;
    }
    .main-span{
        padding-bottom: 30px;
    }
    .main-span-bg {
        font-size: 3em;
        background-size: 25%;
    }
    .main-span-bg > li {
        margin-top: 4%;
        font-size: calc(100% - 14px);
    }
    /*main1*/
    .main-pg1-container {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 980px;
    }
    .main-pg1-container > .swiper {height: 100%;}
    .main-pg1-bg {
        position: absolute;
        right: 0;
        width: 50%;
        height: 100%;
    }
    .main-pg1-con {
        position: absolute; 
        left: 0; 
        top: 0; 
        width: 50%; 
        overflow: hidden;
    }
    .main-pg1-visual {
        width: 100%;
        height: 100%;
    }
    .main-pg1-inner {
        width: 100%;
        height: 100%;
    }
    .main-pg1-tiltle {
        position: absolute;
        bottom: 50%;
        padding-left: 7%;
        font-size: 2.5em;
    }
    .main-pg1-desc {
        width: 100%;
        height: 100%;
        padding: 0 7%;
        color: #fff;
    }
    .main-pg1-desc1 {}
    .main-pg1-span {}



    .main-pg2-container {
        height: 100vh;
        padding-top: 50px;
    }
    .main-pg2-container h2 {
        font-size: 2.2em;
    }
    .main-pg2-txt {
        font-size: 1.5em;
    }
    .pg2-txt-inner {
        width: 410px;
        margin: auto;
    }
    .pg2-txt {
        font-size: 1.5em;
    }
    .pg2-tit {font-size: 1.3em;}
    .pg2-tit-ko {font-size: 1.8em;}
    .main-pg3-inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 1200px;
        height: 320px;
        z-index: 10;
        padding-top: 40px;
        line-height: 2;
    }
    .main-pg3-intit h2 {
        font-size: 1.5em;
    }
    .main-pg3-intit h3 {
        font-size: 3em;
    }
    .main-pg3-intxt div {
        font-size: 1.5em;
        padding-right: 30px;
    }
    .main-pg3-intxt p {
        font-size: 1.1em;
    }
    .main-pg3-bgbox {
        margin-top: 268px;
    }

    
}
@media screen and (min-width: 1500px) {
    .main-span-bg {
        background-size: 22%;
    }
    .main-span-bg > li {
        margin-top: 5%;
    }

}